import { connect } from "umi";
import { useState } from "react";
import {
  Button,
  Table,
  Space,
  Popconfirm,
  Modal,
  Form,
  Input,
  Radio,
  InputNumber,
} from "antd";

const { TextArea } = Input;
const PageTable = (props: any) => {
  const {
    dictInfoList,
    dictIdList,
    getList,
    total,
    // pageNumber,
    // pageSize,
    formParams: { pageNum },
  } = props;
  const { dispatch } = props;
  // const access = useAccess();
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [submitFormRef] = Form.useForm();
  //修改时数据回显
  const update = (id: any, row: any) => {
    submitFormRef.setFieldsValue({ ...row });
    dispatch({
      type: "SystemDictipnaryDetail/queryInfo",
      params: id,
      callback: () => {
        setIsModalOpen(true);
      },
    });
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const changeTable = (e: any) => {
    dispatch({
      type: "SystemDictipnaryDetail/queryTableDataInfoList",
      params: {
        pageNum: e.current,
        pageSize: e.pageSize,
      },
    });
  };
  const columns = [
    {
      title: "字典编码",
      dataIndex: "dictCode",
      key: "dictCode",
    },
    {
      title: "字典标签",
      dataIndex: "dictLabel",
      key: "dictLabel",
    },
    {
      title: "字典键值",
      dataIndex: "dictValue",
      key: "dictValue",
    },
    {
      title: "字典排序",
      dataIndex: "dictSort",
      key: "dictSort",
    },
    // {
    //   title: '状态',
    //   dataIndex: 'status',
    //   key: 'status',
    //   render: (_: any) =>
    //     _ === '0' ? <Tag color="blue">正常</Tag> : <Tag color="red">停用</Tag>,
    // },
    {
      title: "备注",
      dataIndex: "remark",
      key: "remark",
      render: (_: any) => (_ ? _ : "暂无备注"),
    },
    {
      title: "创建时间",
      dataIndex: "createTime",
      key: "createTime",
    },
    {
      title: "操作",
      fixed: "right",
      dataIndex: "dictCode",
      key: "dictCode",
      render: (id: any, row: any) => (
        <Space size="middle">
          <Button type="link" onClick={() => update(id, row)}>
            修改
          </Button>
          <Popconfirm
            title={<>确定将该条数据字典删除吗？</>}
            onConfirm={() => {
              dispatch({
                type: "SystemDictipnaryDetail/delDictInfo",
                params: id,
                callback: () => getList(),
              });
            }}
            okText="确认"
            cancelText="取消"
          >
            <Button type="link" danger>
              删除
            </Button>
          </Popconfirm>
        </Space>
      ),
    },
  ];
  //修改
  const submitForm = () => {
    let res = submitFormRef.getFieldsValue();
    submitFormRef
      .validateFields()
      .then((params: any) => {
        dispatch({
          type: "SystemDictipnaryDetail/updateDictInfo",
          params,
          callback: () => getList(),
        });
      })
      .catch((err: string) => {
        console.log(err);
      });
  };

  return (
    <>
      <Table
        rowKey={(record) => record.dictCode}
        columns={columns}
        dataSource={dictInfoList}
        onChange={changeTable}
        pagination={{
          total,
          showSizeChanger: true,
          defaultCurrent: 1,
          current: pageNum,
        }}
      />
      <Modal
        title="修改字典类型"
        open={isModalOpen}
        onCancel={handleCancel}
        forceRender
        footer={false}
      >
        <Form
          labelCol={{ span: 4 }}
          form={submitFormRef}
          onFinish={submitForm}
          initialValues={{
            ...dictIdList,
          }}
        >
          <Form.Item name="dictCode" label="字典编码" hidden>
            <Input placeholder={"请输入字典名称"} maxLength={20} />
          </Form.Item>
          <Form.Item name="dictType" label="字典类型">
            <Input placeholder={"请输入字典类型"} maxLength={20} disabled />
          </Form.Item>
          <Form.Item name="dictLabel" label="数据标签">
            <Input placeholder={"请输入数据标签"} maxLength={20} />
          </Form.Item>
          <Form.Item name="dictValue" label="数据键值">
            <Input placeholder={"请输入数据键值"} maxLength={20} />
          </Form.Item>
          <Form.Item name="dictSort" label="显示顺序">
            <InputNumber min={0} placeholder="请输入"></InputNumber>
          </Form.Item>
          <Form.Item name="status" label="状态">
            <Radio.Group>
              <Radio value="0">正常</Radio>
              <Radio value="1">停用</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item label="备注" name="remark">
            <TextArea
              rows={4}
              placeholder={"请输入内容"}
              maxLength={100}
              name="remark"
            />
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 4 }}>
            <Button
              type="primary"
              htmlType="submit"
              onClick={() => setIsModalOpen(false)}
            >
              提交
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

export default connect(({ SystemDictipnaryDetail }: any) => ({
  ...SystemDictipnaryDetail,
}))(PageTable);
